<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      data-layout-decorate="~{/layout/_layout}">
<head>
    <title>超市订单管理系统</title>
</head>
<body>
<div class="right" layout:fragment="right">
    <!--使用thymeleaf模板继承，以下内容将嵌入到模板_layout.html中-->

    <div class="location">
        <strong>你现在所在的位置是:</strong>
        <span>用户管理页面</span>
    </div>
    <div class="search">
        <form method="get" action="/user/queryUser">
            <span>用户名：</span>
            <input name="queryUsername" class="input-text" type="text" placeholder="请输入名称，支持模糊查询"
                   data-th-value="${queryUserName}">
            <span>角色：</span>
            <select name="queryUserRole">
                <option value="0" name="">--请选择--</option>
                <option data-th-each="role:${roles}" data-th-value="${role.id}" data-th-text="${role.roleName}">
                </option>
            </select>
            <input type="hidden" name="pageIndex" value="1"/>
            <input value="查 询" type="submit" id="searchbutton">
            <a data-th-href="@{/user/addUser}">添加用户</a>
        </form>
    </div>

    <!--用户-->
    <table class="providerTable">
        <tr class="firstTr">
            <th width="10%">用户编码</th>
            <th width="10%">用户名称</th>
            <th width="10%">性别</th>
            <th width="10%">出生日期</th>
            <th width="20%">电话号码</th>
            <th width="10%">用户角色</th>
            <th width="30%">操作</th>
        </tr>

        <tr data-th-if="${users ==null}">
            <td colspan="7"> 未查询到用户</td>
        </tr>
        <tr data-th-unless="${users == null}" data-th-each="user:${users}">
            <td>
                <span data-th-text="${user.userCode}"></span>
            </td>

            <td>
                <span data-th-text="${user.userName}"></span>
            </td>
            <td>
                <span data-th-if="${user.gender}==1" data-th-text="男"></span>
                <span data-th-if="${user.gender}==2" data-th-text="女"></span>
            </td>
            <td>
                <span data-th-text="${#dates.format(user.birthday, 'yyyy-MM-dd')}"></span>
            </td>
            <td>
                <span data-th-text="${user.phone}"></span>
            </td>
            <td>
                <span data-th-each="role:${roles}" data-th-if="${role.id} == ${user.userRole}"
                      data-th-text="${role.roleName}"></span>
            </td>
            <td>
                <span>
                    <a class="viewUser" href="javascript:;">
                        <img data-th-src="@{/static/images/read.png}" alt="查看" title="查看"/>
                    </a>
                </span>
                <span>
                    <a class="modifyUser" href="javascript:;">
                            <img data-th-src="@{/static/images/read.png}" alt="修改" title="修改"/>
                    </a>
                    </span>
                <span>
                    <a class="deleteUser" href="javascript:;">
                        <img data-th-src="@{/static/images/schu.png}" alt="删除" title="删除"/>
                    </a>
                </span>
            </td>
        </tr>
    </table>
</div>
</section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该用户吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>
<script type="text/javascript" data-th-src="@{/static/js/userlist.js}"></script>
</body>
</html>
